<template>
  <div class="body">
    <div class="block" v-for="category in categories" :key="category.id">
      <div class="columnTitle">
        {{ category.name }}
      </div>
      <div class="list">
        <div class="item" v-for="asset in category.assets" :key="asset.id">
          <div class="content">
            <img :src="asset.image" class="img" alt="Asset Image">
            <div class="name">{{ asset.name }}</div>
            <div class="describe">{{ asset.description }}</div>
          </div>
          <div class="action">
            <button
              v-if="asset.isToggleable"
              @click="handleToggle(asset)"
              :class="asset.isActivated ? 'activated' : 'open'"
              :disabled="(asset.isActivated && asset.disableOnActivate) || (asset.name !== '设备管理' && !isDeviceManagementActivated)"
              :style="{ cursor: (asset.isActivated || (asset.name !== '设备管理' && !isDeviceManagementActivated)) ? 'not-allowed' : 'pointer' }"
              :title="asset.name !== '设备管理' && !isDeviceManagementActivated ? '请先开通设备管理' : ''"
            >
              {{ asset.isActivated ? '已开通' : '免费开通' }}
            </button>
            <div v-else class="status">
              {{ asset.statusText }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal">
        <div class="modal-content">
          <p>{{ modalMessage }}</p>
        </div>
        <div class="modal-actions">
          <button @click="confirmAction">确定</button>
          <button @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AssetManagement",
  data() {
    return {
      categories: [
        {
          id: 1,
          name: "设备资产",
          assets: [
            {
              id: 1,
              name: "设备管理",
              description:
                "设备台账全电子化、规范化保存，全生命周期的设备日志完整记录该设备的一切变更，方便您追溯和分析",
              image: "https://cos.xingluopan.com/app/market/c6eb9915d7565c86fda2e540d2b36851.png",
              isActivated: false,
              isToggleable: true,
              disableOnActivate: false,
            },
            {
              id: 2,
              name: "设备保养维护",
              description:
                "支持创建预防性保养计划，准确掌握设备状况，减少停机时间，延长使用寿命。",
              image: "https://cos.xingluopan.com/app/market/1f0e9eeac0b42b65ecb016335fdb0bc4.png",
              isActivated: false,
              isToggleable: true,
              disableOnActivate: false,
            },
            {
              id: 3,
              name: "设备巡检",
              description: "提供设备巡检的在线解决方案",
              image: "https://cos.xingluopan.com/app/market/5d49767a64e02f656d205f1269188892.png",
              isActivated: false,
              isToggleable: false,
              statusText: "开发中，敬请期待",
            },
          ],
        },
        {
          id: 2,
          name: "行政资产",
          assets: [
            {
              id: 4,
              name: "采购管理",
              description:
                "实现从采购需求、采购计划、询比价、采购合同到采购执行的全过程管理",
              image: "https://cos.xingluopan.com/app/market/33d8b191e98d9ac485f79fb9c2a4e20b.png",
              isActivated: false,
              isToggleable: true,
              disableOnActivate: false,
            },
            {
              id: 5,
              name: "资产档案",
              description: "资产档案设置",
              image: "https://cos.xingluopan.com/app/market/5f1cd17d86956a0bbbc557c175a668ff.png",
              isActivated: true,
              isToggleable: true,
              disableOnActivate: true,
            },
            {
              id: 6,
              name: "资产维修",
              description: "资产发现故障问题时，在线提报维修工单",
              image: "https://cos.xingluopan.com/app/market/bfbacbc4436d90ead7fd2034dbb927ab.png",
              isActivated: true,
              isToggleable: true,
              disableOnActivate: true,
            },
          ],
        },
        {
          id: 3,
          name: "通用产品",
          assets: [
            {
              id: 7,
              name: "高级标签",
              description:
                "支持同时设置多种资产类型的标签模版，满足企业个性化的标签需求",
              image: "https://cos.xingluopan.com/app/market/1da5a16078f63ed61617343f3d167209.png",
              isActivated: true,
              isToggleable: false,
              statusText: "已开通",
            },
            {
              id: 8,
              name: "消息预警",
              description: "多种场景下，可以实时报警，及时处理",
              image: "https://cos.xingluopan.com/app/market/ceeba9f7e10bf55fb4824e7648081842.png",
              isActivated: true,
              isToggleable: false,
              statusText: "已开通",
            },
            {
              id: 9,
              name: "硬件管理",
              description:
                "采用传感器信息，对实时获取的硬件设备状态数据进行监控，及时了解运行运转情况",
              image: "https://cos.xingluopan.com/app/market/751ee22780a69bf5dd31d7e8f3a914af.png",
              isActivated: true,
              isToggleable: false,
              statusText: "已开通",
            },
          ],
        },
        {
          id: 4,
          name: "平台互联",
          assets: [
            {
              id: 10,
              name: "开放平台",
              description: "提供多个标准接口，实现数据快速互通",
              image: "https://cos.xingluopan.com/app/market/466c34fea3297bf55576ba2a3cf8cb23.png",
              isActivated: true,
              isToggleable: false,
              statusText: "已开通",
            },
          ],
        },
      ],
          // 模态对话框相关数据
      showModal: false,
      modalMessage: "",
      modalCallback: null,
    };
  },
  computed: {
    isDeviceManagementActivated() {
      const deviceManagement = this.categories
        .flatMap(category => category.assets)
        .find(a => a.name === "设备管理");
      return deviceManagement ? deviceManagement.isActivated : false;
    },
  },
  methods: {
    handleToggle(asset) {
      const deviceManagement = this.categories
        .flatMap(category => category.assets)
        .find(a => a.name === "设备管理");

      if (asset.name !== "设备管理" && !deviceManagement.isActivated) {
        this.showCustomAlert("请先开通设备管理，再开通其他资产。");
        return;
      }

      if (asset.isActivated) {
        this.showCustomConfirm(`您正在取消开通[${asset.name}]，确定执行该操作吗？`, () => {
          asset.isActivated = false;
        });
      } else {
        this.showCustomConfirm(`您正在开通[${asset.name}]，确定执行该操作吗？`, () => {
          asset.isActivated = true;
        });
      }
    },
    // 显示自定义确认对话框
    showCustomConfirm(message, callback) {
      this.modalMessage = message;
      this.modalCallback = callback;
      this.showModal = true;
    },
    // 显示自定义警告对话框（只有一个确认按钮）
    showCustomAlert(message) {
      this.modalMessage = message;
      this.modalCallback = null;
      this.showModal = true;
    },
    // 确认按钮点击
    confirmAction() {
      if (this.modalCallback) {
        this.modalCallback();
      }
      this.closeModal();
    },
    // 关闭模态对话框
    closeModal() {
      this.showModal = false;
      this.modalMessage = "";
      this.modalCallback = null;
    },
  },
};
</script>

<style scoped lang="scss">
.body {
  padding: 20px;

  .block {
    margin-bottom: 20px;

    .columnTitle {
      font-size: 18px;
      font-weight: 700;
      color: #0b1019;
      padding-left: 12px;
      margin: 0 0 14px;
      position: relative;

      &:before {
        content: "";
        width: 3px;
        height: 17px;
        background-color: #1671fe;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        left: 0;
      }
    }

    .list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 24px;

      .item {
 
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content {
          width: 200px;
          padding: 24px;

          .img {
            width: 50%;
            height: auto;
            object-fit: contain;
          }

          .name {
            height: 24px;
            line-height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #0b1019;
            margin-top: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .describe {
            line-height: 22px;
            font-size: 14px;
            color: #64748b;
            margin-top: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          
        }

        .action {
          height: 50px;
          background-color: #f8fafc;
          border-top: 1px solid #e2e8f0;
          box-sizing: border-box;
          padding: 0 24px;
          display: flex;
          align-items: center;
          justify-content: center;

          button {
            padding: 8px 16px;
            border-radius: 4px;
            border: 1px solid #1671fe;
            background-color: #ffffff;
            color: #1671fe;
            font-size: 13px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;

            &.activated {
              background-color: #1671fe;
              color: #ffffff;
              border: none;
              cursor: pointer;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }

            &:hover:not(:disabled) {
              background-color: #e6f2ff;
              
            }
            
          }

          .status {
            font-size: 13px;
            color: #909399;
          }
          
        }
        
      }
    }
  }
}


.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal {
    background-color: #fff;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    .modal-content {
      margin-bottom: 20px;
      font-size: 16px;
      color: #333;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;

      button {
        padding: 8px 16px;
        margin-left: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;

        &:first-of-type {
          background-color: #1671fe;
          color: #fff;
        }

        &:last-of-type {
          background-color: #e0e0e0;
          color: #333;
        }

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
}
</style>
